<template>
  <div class="progress">
    <div class="progress-basic">
      <p class="progress-basic-title">基础进度条</p>
      <div class="progress-basic-content">
        <div class="progress-item">
          <p>基础进度条</p>
          <vc-progress :value="80" />
        </div>
        <div class="progress-item">
          <p>圆角进度条</p>
          <vc-progress :value="30" :round="true" />
        </div>
        <div class="progress-item">
          <p>显示文字</p>
          <vc-progress :value="75" :show-text="true" />
        </div>
        <div class="progress-item">
          <p>透明背景</p>
          <vc-progress :value="70" :round="true" background="transparent" />
        </div>
        <div class="progress-item">
          <p>渐变背景</p>
          <vc-progress :value="20" :background="['rgba(0,0,0,0.01)', 'rgba(0,0,0,0.3)']" />
        </div>
        <div class="progress-item">
          <p>替换颜色</p>
          <vc-progress :round="true" :value="75" color="#3cc251" />
        </div>
        <div class="progress-item">
          <p>渐变颜色</p>
          <vc-progress :value="75" :color="['rgba(255,0,0,0.01)', 'rgba(255,0,0,0.1)']" />
        </div>
        <div class="progress-item">
          <p>替换内容</p>
          <vc-progress :value="75" :show-text="true" :round="true" color="#3cc251">
            <template #text>
              <CheckCircleFilled class="vc-success" />
            </template>
          </vc-progress>
        </div>
        <div class="progress-item">
          <p>自定义高</p>
          <vc-progress :value="75" :height="20"> </vc-progress>
        </div>
        <div class="progress-item">
          <p>开启动画</p>
          <vc-progress :value="75" :animate="true"> </vc-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { CheckCircleFilled } from '@ant-design/icons-vue';
</script>

<style lang="less" scoped>
  .progress {
    &-basic {
      &-title {
        font-size: 18px;
        font-weight: 700;
        margin-left: 10px;
        margin-top: 15px;
      }
      &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    &-item {
      width: 50%;
      padding: 10px;
      .item {
        width: 25%;
        padding: 10px;
      }
    }
  }
</style>
